<template>
    <div class="Bannerone">
        <div class="header-box">
            <h2>新建员工信息</h2>
        </div>
        <div class="foot-box">
            <div>基础信息</div>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                status-icon>
                <el-form-item label="员工姓名" prop="name">
                    <el-input class="inp" v-model="ruleForm.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="登录账号" prop="ip">
                    <el-input class="inp" v-model="ruleForm.ip" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="员工角色" prop="role">
                    <el-select v-model="ruleForm.role" placeholder="请选择">
                        <el-option key="1" label="管理员"  value="管理员" />
                        <el-option key="2" label="老师"  value="老师" />
                        <el-option key="3" label="课程顾问"  value="课程顾问" />
                        <el-option key="4" label="助教"  value="助教" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="delivery">
                    <!-- <el-input class="inp" v-model="ruleForm" placeholder="请输入" /> -->
                    <el-switch v-model="ruleForm.status" />
                </el-form-item>
                <el-form-item label="添加人" prop="addname">
                    <el-input class="inp" v-model="ruleForm.addname" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="时间" prop="time">
                    <el-input class="inp" v-model="ruleForm.time" placeholder="请输入" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        提交
                    </el-button>
                    <el-button @click="tobanfirst">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { useRouter } from 'vue-router'
import service from '@/utils/request'
//实例化useRouter
var router = useRouter()
var ruleForm = reactive({
    "id": '',
    "name": '',
    "ip": '',
    "role": '',
    "status": '',
    "addname": '',
    "time": ''
})
var ruleFormRef = true
const rules = reactive({
    name: [
        { required: true, message: '请输入', trigger: 'blur' },
        { min: 3, max: 5, message: '请输入', trigger: 'blur' },
    ],
})
const submitForm = (ruleFormRef: any) => {
    ruleFormRef = true
    service({
        url: 'http://localhost:3000/staff',
        method: "post",
        data: ruleForm
    })
        .then(res => {
            ruleForm.id = ''
            ruleForm.name = ''
            ruleForm.ip = ''
            ruleForm.role = ''
            ruleForm.status = ''
            ruleForm.addname = ''
            ruleForm.time = ''
            ElMessage({
                message: "添加城功",
                type: "success",
            })
        })
}

const resetForm = (ruleFormRef: any) => {
    ruleFormRef = true
}

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}
const tobanfirst = () => {
    router.push('/index/Satfffirst')
}
</script>
<style scoped>
.header-box {
    /* background-color: white; */
    background-color: rgba(255, 255, 255, 0.307);
    height: 50px;
}

.foot-box {
    margin-top: 20px;
    /* background-color: white; */
    background-color: rgba(255, 255, 255, 0.744);
}

.avatar-uploader {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.inp {
    width: 400px;
}</style>